<template>
	<view class="body">

		<view class="details-header">
			<view class="TopTitle-item1">
				<image src="../../static/icon/back.png" @tap="goBackIndex(pageId)"></image>
			</view>
			<view class="header-name">
				<text>推荐衣服</text>
			</view>
		</view>

		<view class="container">

			<view class="container-item" v-for="(item, index) in imgUrlArr" :key="index">

				<view class="container-item-list" v-for="(item2, index2) in item" :key="index2">
					<image :src="imgBaseUrl + item2.mimgUrl"></image>
					<view class="container-item-list-title1">{{ item2.mtypeDescribe }}</view>
					<view class="container-item-list-title2">
						<span>{{item2.mtypeName}}</span><span>{{item2.mtypeName}}</span>
					</view>
					<view class="container-item-list-title3">{{item2.mimgDescribe}}</view>
				</view>

			</view>

		</view>

		<!-- 如果没有数据就显示这段话 -->

		<view class="isNone" v-if="isVisiable">
			<view class="isNone-title">您还未上传 <span> {{title}} </span> 相关的的衣服！！！</view>
		</view>

	</view>
</template>

<script>
	//提升this的作用域
	let _self
	export default {
		data() {
			return {
				pageId: '',
				title: '',
				imgUrlArr: [],
				imgBaseUrl: '',
				isVisiable: false
			}
		},

		onLoad(option) {
			_self = this
			_self.pageId = option.id
			//如果id=1，就代表是从推荐页面过来的
			if (option.id === '1') {
				_self.title = option.name
				_self.getRecommendData()
			}
			//如果id=2，就代表从上传图片页面过来的
			if (option.id === '2') {
				this.getRecommendClothes(option.recommendClothes)
			}
			_self.imgBaseUrl = this.$api.IMG_SERVER_BASE
			uni.showLoading({
				title: '正在查询...'
			})
		},

		methods: {
			//返回
			goBackIndex(pageId) {
				if (pageId === '1') {
					uni.switchTab({
						url: '../history/history'
					})
				}
				if (pageId === '2') {
					uni.switchTab({
						url: '../index/index'
					})
				}
			},

			//拍照推荐衣服,拍上衣推荐下衣
			getRecommendClothes(clothes) {
				const clothesObj = JSON.parse(clothes)
				this.$get(this.$api.GET_RECOMMEND_CLOTHES + clothesObj.mTypeName).then(res => {
					if (res.code === 200 && res.content.length != 0) {
						//渲染图片
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
						this.imgUrlArr = res.content
						uni.hideLoading()
					} else {
						//搜索失败
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
						uni.hideLoading()
						//提示没有找到衣服
						_self.isVisiable = true
					}
				})
			},

			//得到根据关键字对应的衣服
			getRecommendData() {
				_self.$get(_self.$api.GET_PAGINATION_LIKE_IMG + _self.title).then(res => {
					if (res.code === 200 && res.content.length != 0) {
						//渲染图片
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
						this.imgUrlArr = res.content
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
						//提示没有找到衣服
						_self.isVisiable = true
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.body {

		.details-header {
			display: flex;

			.TopTitle-item1 {
				image {
					margin: 16rpx 0 0 16rpx;
					width: 60rpx;
					height: 60rpx;
				}
			}

			.header-name {
				width: 600rpx;
				padding-right: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				font-size: 34rpx;
			}
		}

		.container {
			background-color: #f8f9fb;
			display: flex;
			justify-content: space-around;

			.container-item {
				.container-item-list {
					width: 500rpx;
					height: 1000rpx;
					margin: 20rpx 80rpx;
					border-radius: 20rpx;

					image {
						width: 100%;
						height: 80%;
						border-radius: 20rpx;
						box-shadow: 5rpx 5rpx 3rpx 4rpx rgba(0, 0, 0, .06);
					}

					.container-item-list-title1 {
						font-weight: bold;
						font-size: 36rpx;
						color: black;
						margin-bottom: 10rpx;
					}

					.container-item-list-title2 {
						color: black;
						font-size: 30rpx;
						margin-bottom: 10rpx;

						span {
							margin-right: 10rpx;
						}
					}

					.container-item-list-title3 {
						color: black;
						font-size: 26rpx;
					}
				}
			}

			.isNone {
				display: block;

				.isNone-title {
					display: flex;
					align-items: center;
					// align-content: center;
					font-size: 50rpx;

					span {
						font-weight: bold;
						color: red;
					}
				}
			}
		}

	}
</style>
